import { ref, computed } from 'vue'
export default function useShortcut(props, groupRef) {
    // 获取 scroll 组件 dom
    const scrollRef = ref(null)
    // 计算属性遍历 每一个字
    const shortcutList = computed(() => {
        return props.data.map((group) => {
            return group.title
        })
    })
    const touch = {}
    // 触摸开始
    function onShortcutTouchStart(e) {
        // 点击对应的下标
        const anchorIndex = parseInt(e.target.dataset.index)
        touch.y1 = e.touches[0].pageY
        touch.anchorIndex = anchorIndex
        scrollTo(anchorIndex)
    }
    // 滑动
    function onShortcutTouchMove(e) {
        touch.y2 = e.touches[0].pageY
        const delta = (touch.y2 - touch.y1) / 18 | 0
        const anchorIndex = touch.anchorIndex + delta
        scrollTo(anchorIndex)
    }
    function scrollTo(index) {
        // 解决初始点击的不是 27个字符 而是外面的父容器而报错
        if (isNaN(index)) {
            return
        }
        // 解决超出范围之后的报错
        index = Math.max(0, Math.min(shortcutList.value.length - 1, index))
        // 当前点击的 dom 的下标
        const targetEl = groupRef.value.children[index]

        const scroll = scrollRef.value.scroll
        scroll.scrollToElement(targetEl, 20) // 第一个参数是哪个dom  第二个是时间
    }
    return {
        shortcutList,
        onShortcutTouchStart,
        scrollRef,
        onShortcutTouchMove
    }
}
